<template>
  <div class="json-node-viewer">
    <!-- 节点类型选择器 -->
    <div class="node-type-selector">
      <select v-model="selectedNodeType">
        <option value="">所有节点类型</option>
        <option v-for="type in nodeTypes" :key="type" :value="type">
          {{ type }}
        </option>
      </select>
    </div>

    <!-- 节点连接视图 -->
    <div class="node-connections" v-if="showConnections">
      <div v-for="(node, nodeId) in filteredNodes" :key="nodeId" class="connection-item">
        <h3>{{ node._meta.title }} (ID: {{ nodeId }})</h3>
        <div class="connections">
          <div v-for="(value, key) in node.inputs" :key="key" class="connection">
            <template v-if="Array.isArray(value) && value.length === 2">
              ↳ 输入 "{{ key }}" 连接到节点 {{ value[0] }} 的输出 {{ value[1] }}
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 节点卡片视图 -->
    <div class="node-grid">
      <div v-for="(node, nodeId) in filteredNodes" 
           :key="nodeId" 
           class="node-card">
        <div class="node-header">
          <div class="node-title">
            <span class="node-type-badge">{{ node.class_type }}</span>
            {{ node._meta.title }}
          </div>
          <div class="node-id">ID: {{ nodeId }}</div>
        </div>
        <div class="node-content">
          <div class="node-inputs">
            <h4>输入参数:</h4>
            <div v-for="(value, key) in node.inputs" 
                 :key="key" 
                 class="input-item">
              <span class="input-label">{{ key }}:</span>
              <span class="input-value">{{ formatValue(value) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  jsonData: {
    type: Object,
    required: true
  },
  showConnections: {
    type: Boolean,
    default: false
  }
})

const selectedNodeType = ref('')

// 计算所有可用的节点类型
const nodeTypes = computed(() => {
  const types = new Set()
  Object.values(props.jsonData).forEach(node => {
    types.add(node.class_type)
  })
  return Array.from(types).sort()
})

// 根据选择的类型过滤节点
const filteredNodes = computed(() => {
  if (!selectedNodeType.value) return props.jsonData
  return Object.entries(props.jsonData).reduce((acc, [id, node]) => {
    if (node.class_type === selectedNodeType.value) {
      acc[id] = node
    }
    return acc
  }, {})
})

// 格式化值显示
const formatValue = (value) => {
  if (Array.isArray(value)) {
    if (value.length === 2 && typeof value[0] === 'string' && typeof value[1] === 'number') {
      return `连接到节点 ${value[0]} 的输出 ${value[1]}`
    }
    return `[${value.join(', ')}]`
  }
  if (typeof value === 'object' && value !== null) {
    return JSON.stringify(value)
  }
  return value
}
</script>

<style scoped>
.json-node-viewer {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.node-type-selector {
  margin-bottom: 20px;
}

.node-type-selector select {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 200px;
  font-size: 14px;
}

.node-connections {
  margin-bottom: 30px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
}

.connection-item {
  margin-bottom: 15px;
}

.connection {
  padding: 4px 0;
  color: #666;
  font-size: 14px;
}

.node-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.node-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 16px;
}

.node-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.node-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-type-badge {
  background: #42b883;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.node-id {
  color: #666;
  font-size: 14px;
}

.node-inputs {
  margin-top: 12px;
}

.node-inputs h4 {
  margin-bottom: 8px;
  color: #333;
}

.input-item {
  display: flex;
  margin: 4px 0;
  font-size: 14px;
}

.input-label {
  color: #666;
  min-width: 100px;
  margin-right: 8px;
}

.input-value {
  color: #333;
  word-break: break-all;
}

@media (max-width: 768px) {
  .node-grid {
    grid-template-columns: 1fr;
  }
  
  .node-type-selector select {
    width: 100%;
  }
}
</style> 